<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/layer.css"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/jq.cookie.js"></script>
</head>
<style>
    .password {
        width: 90%;
        margin-left: 5%;
    }

    .form-control {
        display: inline-block;
        width: 70%;
        display: inline-block;
    }

    .password label {
        width: 30%;
    }

    .password div {
        margin-top: 20px;
    }

    .password-strong {
        color: red;
        font-size: 12px;
        font-weight: bold;
    }

    .submit {
        text-align: center;
    }

    button {
        width: 100px;
        height: 35px;
        background: #3c8dbc;
        color: white;
        margin-top: 20px;
    }
</style>
<body>
<div class="password">
    <div>
        <label>原始密码：</label><input class="form-control old_password" type="password" autocomplete="off"/>
    </div>
    <div>
        <label>新密码：</label><input class="form-control new_password" type="password" autocomplete="off"/>
    </div>
    <div class="password-strong">
        <label></label><span>密码强度：</span><span class="strong_tip">简单</span>
    </div>
    <div>
        <label>确认密码：</label><input class="form-control ensure_password" type="password" autocomplete="off"/>
    </div>
    <div class="submit">
        <button class="save_btn">提交</button>
    </div>
</div>


</body>
</html>
<script>
    $('.new_password').on('input propertychange', function () {
        var text = $('.new_password').val();
        var len = text.length;
        var strongthTip = $('.strong_tip');
        var sec = 0;
        var regxs = new Array();
        regxs[0] = /[^a-zA-Z0-9_]/g;
        regxs[1] = /[a-z]/g;
        regxs[2] = /[0-9]/g;

        if (len >= 6) {
            for (var i = 0; i < regxs.length; i++) {
                if (text.match(regxs[i])) {
                    sec++;
                }
            }
        }
        if (sec == 0) {
            strongthTip.text('不能小于6个字符');
            $('.password-strong').css('color', '#f39c12')
        } else if (sec == 1) {
            strongthTip.text('弱');
            $('.password-strong').css('color', '#f39c12')
        } else if (sec == 2) {
            strongthTip.text('中');
            $('.password-strong').css('color', 'orange')
        } else if (sec == 3) {
            strongthTip.text('强');
            $('.password-strong').css('color', 'green')
        } else if (sec == 4) {
            strongthTip.text('超强');
            $('.password-strong').css('color', 'green')
        }


    })
    var passOff = true;

    $('.ensure_password').focusout(function () {
        var val1 = $('.new_password').val();
        var val2 = $(this).val();
        if (val1 !== val2) {
            passOff = false;
            layer.msg('两次输入密码不一致，请重新填写');

        }
    })


    $('.save_btn').click(function () {
        if ($('.new_password').val() == '' || $('.ensure_password').val() == '') {
            passOff = false;
            layer.msg('内容填写不完整')
        }
        if (passOff) {
            $.ajax({
                type: "get",
                url: "http://www.puer.zone:30000/UserPasswordModify",
                async: true,
                data: {
                    id: $.cookie('UserId'),
                    old_pwd: $('.old_password').val(),
                    new_pwd: $('.new_password').val()
                },
                success: function (data) {
                    if (data[0] == 'success') {
                        layer.msg('修改成功', {time: 500}, function () {
                            // window.location.href="http://puer.zone:9010/login.html";
                        });

                    } else {
                        layer.msg('修改失败，原始密码不正确', {time: 500}, function () {

                        })
                    }
                }
            });
        }
    })

</script>